<div class="d-sm-none d-md-block">
    <table class="table table-striped table-bordered">
        <thead>
            <tr>
                <th>{% trans %}Line #{% endtrans %}</th>
                <th>{% trans %}SKU{% endtrans %}</th>
                <th>{% trans %}Text{% endtrans %}</th>
                <th class="text-right">{% trans %}Taxless Unit Price{% endtrans %}</th>
                <th class="text-right">{% trans %}Quantity{% endtrans %}</th>
                <th class="text-right">{% trans %}Refunded Quantity{% endtrans %}</th>
                <th class="text-right">{% trans %}Taxless Discount{% endtrans %}</th>
                <th class="text-right">{% trans %}Tax{% endtrans %}</th>
                <th class="text-right">{% trans %}Taxless Total{% endtrans %}</th>
                <th class="text-right">{% trans %}Total incl. Tax{% endtrans %}</th>
            </tr>
        </thead>
        {% if not supplier %}
        <tfoot>
            <tr>
                <th colspan="8"></th>
                <th class="text-right">{{ order.taxless_total_price|money }}</th>
                <th class="text-right">{{ order.taxful_total_price|money }}</th>
            </tr>
        </tfoot>
        {% endif %}
        <tbody>
            {% set lines = (order.lines.filter(supplier=supplier) if supplier else order.lines) %}
            {% for line in lines.order_by("ordering") %}
            <tr>
                <td>{{ line.ordering + 1 }}</td>
                <td>{{ line.sku }}</td>
                <td>{{ line.text }}</td>
                <td class="text-right">{{ line.taxless_base_unit_price|money }}</td>
                <td class="text-right">{{ line.quantity|number }}</td>
                <td class="text-right">{{ line.refunded_quantity|number }}</td>
                <td class="text-right">{% if line.taxless_discount_amount %}{{ line.taxless_discount_amount|money }}{% else %}-{% endif %}</td>
                <td class="text-right">{{ line.tax_rate|percent }}</td>
                <td class="text-right">{{ line.taxless_price|money }}</td>
                <td class="text-right">{{ line.taxful_price|money }}</td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</div>
<div class="d-none d-sm-block d-md-none mobile-list-group">
    <ul class="list-group">
        {% set lines = (order.lines.filter(supplier=supplier) if supplier else order.lines) %}
        {% for line in lines.order_by("ordering") %}
            <li class="list-group-item">
                <div class="row">
                    <div class="col-sm-6">
                        <strong>{{ line.sku }}</strong>
                    </div>
                    <div class="col-sm-6 text-right">
                        {{ line.text }}
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-6">
                        {{ line.quantity|number }} &times; {{ line.taxless_base_unit_price|money }} {% if line.taxless_discount_amount %}<span class="text-muted">{% trans %}Discount{% endtrans %}{{ line.taxless_discount_amount|money }}</span>{% endif %}
                    </div>
                    <div class="col-sm-6 text-right">
                        <strong>{% trans %}Total{% endtrans %}: {{ line.taxful_price|money }}</strong>
                    </div>
                    <div class="col-sm-12 text-right text-muted">
                        {{ line.tax_rate|percent }} {% trans %}Tax{% endtrans %} ({{ line.taxless_price|money }} {% trans %}Taxless{% endtrans %})
                    </div>
                </div>
            </li>
        {% endfor %}
    </ul>
    {% if not supplier %}
    <div class="clearfix">
        <div class="col-sm-6"><strong>{% trans %}Taxless Total{% endtrans %}</strong></div>
        <div class="col-sm-6 text-right"><strong>{{ order.taxless_total_price|money }}</strong></div>
    </div>
    <div class="clearfix">
        <div class="col-sm-6"><strong>{% trans %}Total incl. Tax{% endtrans %}</strong></div>
        <div class="col-sm-6 text-right"><strong>{{ order.taxful_total_price|money }}</strong></div>
    </div>
    {% endif %}
</div>

